<template>
  <div class="content-container" style="height: calc(100vh - 60px);position: relative"  v-loading="loading"
       element-loading-text="加载中"
       element-loading-spinner="el-icon-loading">
    <div class="list">
      <div class="list-item"  v-for="(item,index) in instiData" :key="index"  @click="$router.push({path:'/school-detail',query:{pxjgxh:item.pxjgxh}})">
          <img style="width: 580px;height: 300px;margin-top: 30px" :src="item.logo"/>
          <div style="font-size: 20px;font-weight: bold">  {{item.pxjgmc}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {skillsTrainingApi} from "@/api";
import {institutionList} from "@/api/modules/skillsTrainingApi";
export default {
  name:"school-list",
  components:{
    ReturnBtn
  },
  data(){
    return {
      loading:false,
      pageTimer:null,
      size:15,
      page:1,
      nomoreLoading:false,
      dict:{
        kklx00:{
          "1":"随到随学",
          "2":"周末可"

        }
      },
      instiData:[]
    }
  },
  mounted() {
    this.queryInstitution()
  },
  methods: {
    queryInstitution(){
     this.loading=true
    this.pageTimer=setInterval(()=>{
        if( this.nomoreLoading ){
          return
        }
        skillsTrainingApi.institutionList({page:this.page,limit:this.size}).then((res)=>{
          this.page++
          this.instiData = this.instiData.concat(res.data.records)
          if (this.instiData.length >= res.data.total){
            this.nomoreLoading = true
            clearInterval(this.pageTimer)
          }
        }).catch(()=>{
          this.error = true
        }).finally(()=>{
          this.loading = false
        })
      },500)
    }

  }
}
</script>
<style lang="scss" scoped>
.list{
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow:row wrap;
  .list-item{
    border-radius: 16px;
    margin-top: 30px;
    margin-left: 40px;
    width: 700px;
    height: 380px;
    background-color: #ebedf0;
  }
}
</style>
